<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
table, th, td {
	border: 1px solid grey;
	border-collapse: collapse;
	padding: 5px;
}

table tr:nth-child(odd) {
	background-color: #f1f1f1;
}

table tr:nth-child(even) {
	background-color: #ffffff;
}
</style>
</head>

<body>
	
	<div ng-app="myApp" ng-controller="usersCtrl">

		<table id="userTable">
			<tr>
				<td>选择</td>
				<td>编号</td>
				<td>邮箱</td>
				<td>姓名</td>
			<tr  ng-repeat="x in users">
				<td><input type="checkbox" ></td>
				<td>{{ x.id }}</td>
				<td>{{ x.email }}</td>
				<td>{{ x.name }}</td>
			</tr>
		</table>

		<form>
			<div ng-controller="createCtrl">
				<p>
					email:<input type="text" name="email" ng-model="userdata.email">
					name:<input type="text" name="name" ng-model="userdata.name">
					<button type="submit" ng-click="createUser()">新建</button>
				</p>
			</div>

			<div ng-controller="deleteCtrl">
				<p>
					id:<input type="number" ng-model="deleteId">
					<button type="submit" ng-click="deleteUser()">删除</button>
				</p>
			</div>

			<div ng-controller="updateCtrl">
				<p>
					<button type="submit" ng-click="updateUser()">修改</button>
					更新次数:{{count}}
				</p>

			</div>
		</form>
	</div>



	<script>
		var app = angular.module('myApp', []);
		app.controller('usersCtrl', function($scope, $http) {
			$http.get("/t").success(
			function(response) {
						$scope.users = response;
					});		
		});
		 
 		app.controller('createCtrl', function($scope, $http) {
 			//定义新建按钮点击响应函数
			$scope.createUser=function(){
				console.log("create user...");
			$http.post("/create?email="+ $scope.userdata.email+"&name="+$scope.userdata.name).success
			(function(userdata) {
				$scope.users = userdata;
			    console.log(userdata);
			    alert("创建成功，请刷新页面！");
			});}
		});   
		
 		app.controller('deleteCtrl', function($scope,$http){
 			$scope.deleteUser=function(){
 			$http.post("/delete?id="+ $scope.deleteId).seccess(
 						alert("删除成功，请刷新页面!")
 					);
 			}
 		});


		app.controller('updateCtrl',function($scope){
			$scope.count=0;
			$scope.updateUser=function(){
				$scope.count++;
			}
		});
		
		
	</script>

</body>
</html>
